<template>
	<view class="detail">
		<uv-swiper :list="item.slider_image" height="400" @change="e => current = e.current">
			<template v-slot:indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ current + 1 }}/{{ item.slider_image.length }}</text>
				</view>
			</template>
		</uv-swiper>

		<view class="section">
			<uv-text :text="item.store_name" size="15" color="#A0A0A0" />
			<uv-row gutter="10" customStyle="margin-top: 15px;flex-wrap: wrap;">
				<uv-col span="6" customStyle="margin-bottom: 10px">
					<view class="label label_active">
						<uv-text :text="item.store_name" :lines="1" size="28upx" color="#333333" align="center" />
						<uv-text text="免费预约" size="28upx" color="#ff0012" align="center" />
					</view>
				</uv-col>
			</uv-row>
			<view class="flex justify-between">
				<view class="flex align-center">
					<text class="text">保障</text>
				</view>
				<view class="flex align-center">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/bc701202508161119436458.png" mode="widthFix" class="textimg" />
					<text class="text">无额外收费</text>
				</view>
				<view class="flex align-center">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/1e5e7202508161120137610.png" mode="widthFix" class="textimg" />
					<text class="text">未服务随时退</text>
				</view>
				<view class="flex align-center">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/04e30202508161120361365.png" mode="widthFix" class="textimg" />
					<text class="text">不满意重服务</text>
				</view>
			</view>
		</view>

		<uv-gap height="10" bgColor="#F6F4F7"></uv-gap>

		<view class="section">
			<lst-title title="服务规格" more="查看全部" size="24upx" color="#A0A0A0" @click="goOrder" />
		</view>

		<view class="box" style="padding: 0;">
			
			
			<rich-text :nodes="richReplace(item.details)" class="rich" />
		</view>

		<uv-gap height="10" bgColor="#F6F4F7"></uv-gap>
		<view class="section">
			<lst-title title="订购须知" more="取消、退款、赔付规则" size="24upx" color="rgb(255 0 18)" @moreClick="moreClick" />
		</view>
		<uv-gap height="10" bgColor="#F6F4F7"></uv-gap>
		<view class="section">
			<lst-title title="用户评论" more="0评论" moreColor="#A0A0A0" />
		</view>
		<uv-gap height="100" bgColor="#F6F4F7"></uv-gap>

		<view class="purchase">
			<view class="kefu">
				<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/2e45c202508161121088075.png" mode="widthFix" class="icon" />
				<text>在线咨询</text>
			</view>
			<uv-button text="立即购买" color="rgb(255 0 18)" style="width: 70%;" shape="circle"
				@click="goOrder"></uv-button>
		</view>

		<uv-popup mode="bottom" ref="skusRef" :round="10">
			<lst-skus :skus="item.sku_object" name="buy" :item="item" @select="skusSelect" :initSkus="skus" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getIconPath
	} from '@/util'
	
	import { richReplace } from '@/util/tools.js';
	
	import {
		storeToRefs
	} from "pinia"
	import {
		useUserStore, useOrderStore 
	} from '@/store'
	import {
		getServiceDetail
	} from '@/api'
	import {
		onLoad,onShareAppMessage,onShareTimeline
	} from '@dcloudio/uni-app'
	

	
	
	const user = useUserStore()
	const orderStore = useOrderStore() // 新增 orderStore
	const {
		token
	} = storeToRefs(user)
	const current = ref(0)
	const active = ref(0)
	const item = ref({
		slider_image: [],
		sku_object: {
			skus: [],
			specs: []
		}
	})
	
	const product = ref({
	  id: 0,
	  title: '',
	  desc: '',
	  imageUrl: ''
	})
	
	const skus = ref('')
	const skusRef = ref(null)
	const moreClick = () => console.log(111);
	const skusOpen = () => {
		skusRef.value.open()
	}
	const skusClose = () => {
		skusRef.value.close()
	}

	const goOrder = async () => {
		if (!token.value) {
			uni.showToast({
				title: '请先登录',
				mask: true,
				icon: 'none'
			})
			const url = '/pages-home/service/detail?id=' + item.value.id
			setTimeout(() => {
				uni.navigateTo({
					url: `${uni.$config.loginPage}?redirect=${encodeURIComponent(url)}`
				})
			}, 1000)
			return
		}
		skusOpen()
	}

	const skusSelect = async (e) => {
		skus.value = e
		skusRef.value.close()
		let data = {
			"id": item.value.id,
			"sid": item.value.sid,
			"num": e.num,
			"store_name": item.value.store_name
		}
		if (e.item == null) {
			data.sku_id = 0
			data.sku_name = ''
			data.price = item.value.price
			data.image = item.value.image
		} else {
			data.sku_id = e.item.id
			data.sku_name = e.sku[0].name
			data.price = e.item.price
			data.image = e.item.image ? e.item.image : item.value.image
		}
		// 将数据存储到 Pinia 而不是通过 URL 传递
		orderStore.setOrderData(data)
		//跳转确认订单页面
		uni.navigateTo({
			url: `/pages-home/service/confirm_order?id=${item.value.id}`
		})
	}
	
	
	

	onShareAppMessage(() => ({
	  title: product.value.desc,
	  path: `/pages-home/service/detail?id=${product.value.id}`, 
	  imageUrl: product.value.imageUrl
	}))
	
	onShareTimeline(() => ({
	  title: product.value.desc,
	  query: `id=${product.value.id}`,
	  imageUrl: product.value.imageUrl
	}))
	
	
	onLoad(async (options) => {
		const {
			result
		} = await getServiceDetail(options.id)
		item.value = result
		
		product.value.id=options.id
		product.value.title='为您推荐'
		product.value.desc= result.store_name
		product.value.imageUrl=result.image
		
	})
</script>

<style lang="scss" scoped>
	.section {
		padding: 30upx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.label {
		width: 100%;
		padding: 20upx 0;
		border-radius: 6upx;
		border: 1px solid #A0A0A0;
	}

	.label_active {
		border-color: #ff0012;
		background-color: #FCECEC;
	}

	.text {
		color: #A0A0A0;
		font-size: 24upx;
	}

	.textimg {
		width: 26upx;
		margin-right: 10upx;
	}

	.spec {
		width: 100%;
		color: #333333;
		font-size: 24upx;
		padding: 20upx 0;
		text-align: center;
		border-radius: 8upx;
		background-color: #F5F5F5;
	}

	.purchase {
		bottom: 0;
		width: 100%;
		z-index: 10;
		display: flex;
		padding: 30upx;
		position: fixed;
		align-items: center;
		box-sizing: border-box;
		background-color: #fff;
		justify-content: space-between;

		.kefu {
			display: flex;
			align-items: center;
			flex-direction: column;

			.icon {
				width: 30upx;
				margin-bottom: 10upx;
			}

			text {
				color: #333333;
				font-size: 24upx;
			}
		}
	}

	.box {
		padding: 30upx;
		background-color: #fff;

		img {
			max-width: 100%;
		}
	}
</style>